{% extends 'base.html'%}
{%load i18n%}
{% block title %}{%trans 'Permission list' %}{% endblock %}
{% load static %}
{% block css %}
<!-- DataTables css -->
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
{% endblock %}
{% block content %}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="box box-success">
                <div class="box-header with-border">
                    <div class="caption">
                        <button class="btn btn-primary" onclick="window.location.href = '{% url 'permissioncreate' %}'">
                            {% trans 'Add New' %}
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">{%trans 'Action' %}</a></li>
                                <li><a href="#">{%trans 'Another action' %}</a></li>
                                <li><a href="#">{%trans 'Something else here' %}</a></li>
                                <li class="divider"></li>
                                <li><a href="#">{%trans 'Separated link' %}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">

                    <table id="permissionlist" class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th>{%trans 'user name' %}</th>
                            <th>{%trans 'permissions' %}</th>
                            <th>{%trans 'groups' %}</th>
                            <th>{%trans 'action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for element in object_list %}
                        <tr>
                            <td>{{ element.user.username }}</td>
                            <td>
                                {% for permission in  element.permissions.all %}
                                    <a>{% trans permission.name %}</a><br>
                                {% endfor %}
                            </td>
                            <td>
                                {% for group in  element.groups.all %}
                                <a>{{group.name}}</a><br>
                                {% endfor %}
                            </td>
                            <td data-editable="false" class="text-center pull-left">
                                {% if perms.permission.can_change_permissions %}<a class="btn btn-xs btn-info" href="{% url 'permissionupdate' element.id %}">{%trans 'edit' %}</a>{% endif %}
                                {% if perms.permission.can_delete_permissions %}<a class="btn btn-xs btn-danger" href="{% url 'permissiondelete' element.id %}">{%trans 'delete' %}</a>{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>

    </div>
</section>
{% endblock %}
{% block js %}
<!-- DataTables -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>
<script type="application/javascript">
    $(function () {
        $('#permissionlist').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "iDisplayLength": 50,
            "autoWidth": false,
        });
    });
</script>
{% endblock %}